<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>{$data.name}</title>
    <link rel="stylesheet" href="__STATIC__assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="__STATIC__assets/module/admin.css?v=318"/>
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 项目列表样式 */
        .project-list-item {
            background-color: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            cursor: pointer;
            transition: all .2s;
        }

        .project-list-item:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        }

        .project-list-item .project-list-item-cover {
            width: 100%;
            height: 190px;
            display: block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .project-list-item-body {
            padding: 20px;
        }

        .project-list-item .project-list-item-body > h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 12px;
        }

        .project-list-item .project-list-item-text {
            height: 44px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .project-list-item .project-list-item-desc {
            position: relative;
        }

        .project-list-item .project-list-item-desc .time {
            color: #999;
            font-size: 12px;
        }

        .project-list-item .project-list-item-desc .ew-head-list {
            position: absolute;
            right: 0;
            top: 0;
        }

        .ew-head-list .ew-head-list-item {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: -10px;
        }

        .ew-head-list .ew-head-list-item:first-child {
            margin-left: 0;
        }

        /** // 项目列表样式结束 */
         /* 用户信息 */
        .user-info-head {
            width: 100%;
            height: 200px;
            position: relative;
            display: inline-block;
            overflow: hidden;
            cursor: pointer;
            margin: 0 auto;
        }
        
        .user-info-head img {
            width: 100%;
            height: 100%;
        }

        .user-info-list-item {
            position: relative;
            padding-bottom: 8px;
        }

        .user-info-list-item > .layui-icon {
            position: absolute;
        }

        .user-info-list-item > p {
            padding-left: 30px;
        }

        .layui-line-dash {
            border-bottom: 1px dashed #ccc;
            margin: 15px 0;
        }

        /* 基本信息 */
        #userInfoForm .layui-form-item {
            margin-bottom: 25px;
        }

        /* 账号绑定 */
        .user-bd-list-item {
            padding: 14px 60px 14px 10px;
            border-bottom: 1px solid #e8e8e8;
            position: relative;
        }

        .user-bd-list-item .user-bd-list-lable {
            color: #333;
            margin-bottom: 4px;
        }

        .user-bd-list-item .user-bd-list-oper {
            position: absolute;
            top: 50%;
            right: 10px;
            margin-top: -8px;
            cursor: pointer;
        }

        .user-bd-list-item .user-bd-list-img {
            width: 48px;
            height: 48px;
            line-height: 48px;
            position: absolute;
            top: 50%;
            left: 10px;
            margin-top: -24px;
        }

        .user-bd-list-item .user-bd-list-img + .user-bd-list-content {
            margin-left: 68px;
        }

        
    </style>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!-- 左 -->
        <div class="layui-col-sm12 layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-body" style="padding: 25px;">
                    <div class="text-center layui-text">
                        <div class="user-info-head" id="userInfoHead">
                            <img src="http://pic.51yuansu.com/pic3/cover/01/02/61/5900769c08190_610.jpg" alt=""/>
                        </div>
                        <h2 style="padding-top: 15px;">{$data.user}</h2>
                        <p style="padding-top: 8px;">我的套餐</p>
                    </div>
                    <div class="layui-text" style="padding-top: 30px;">
                        <div class="user-info-list-item">
                            <i class="layui-icon layui-icon-diamond"></i>
                            <p>{$data.taocan_name}</p>
                        </div>
                        <div class="user-info-list-item">
                            <i class="layui-icon layui-icon-log"></i>
                            <p>{$data.create_time}</p>
                        </div>
                    </div>
                    <div class="layui-line-dash"></div>
                    <h3>特权</h3>
                    <div class="layui-badge-list" style="padding-top: 6px;">
                        {if condition="$data.taocan_quanx1 eq '-1'"} {else /}<span class="layui-badge layui-bg-gray">{$data.taocan_quanx1}%费率</span>{/if}
                        {if condition="$data.taocan_quanx2 eq '0'"} {else /}<span class="layui-badge layui-bg-gray">免挂</span>{/if}
                    </div>
                </div>
            </div>
        </div>
        <!-- 右 -->
        <div class="layui-col-sm12 layui-col-md9">
            <div class="layui-card">
                <!-- 选项卡开始 -->
                <div class="layui-tab layui-tab-brief" lay-filter="userInfoTab">
                    <div class="layui-tab-content">
                        <!-- tab1 -->
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row layui-col-space15" id="demoCardList1"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="shangh">
    <form id="dialogEditForm1" lay-filter="dialogEditForm1" class="layui-form model-form no-padding">
        <input name="id" type="hidden"/>
        <div class="model-form-body" style="max-height: 430px;">
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">套餐名称:</label>
                <div class="layui-input-block">
                    <input name="taocan_name" placeholder="套餐名称" class="layui-input" lay-verify="required" required disabled/>
                </div>
            </div> 
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">套餐价格:</label>
                <div class="layui-input-block">
                     <input name="taocan_jiage" placeholder="商户密码" class="layui-input" required disabled/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-form-required">充值方式:</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="yue" title="余额" checked>
                    <div class="layui-word-aux">充值不到账，请联系客服处理！</div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right model-form-footer">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
            <button class="layui-btn" lay-filter="dialogEditSubmit1" lay-submit>购买</button>
        </div>
    </form>
</script>

<!-- 项目模板 -->
<script type="text/html" id="demoCardItem1">
    <div class="layui-col-md3">
        <div class="project-list-item">
            <img class="project-list-item-cover" src="__STATIC__assets/images/vip.png"/>
            <div class="project-list-item-body">
                <h2>{{d.taocan_name}}</h2>
                {{#  if(d.taocan_quanx1 != -1){ }} <div class="project-list-item-desc"><span class="time">套餐特权：<span class="layui-badge layui-bg-gray">{{d.taocan_quanx1}}%费率</span></span></div> {{#  } }}
                {{#  if(d.taocan_quanx2 != 0){ }} <div class="project-list-item-desc"><span class="time">套餐特权：<span class="layui-badge layui-bg-gray">免挂</span></span></div> {{#  } }}
                {{#  if(d.taocan_time != 0){ }} <div class="project-list-item-desc"><span class="time">套餐时间：<span class="layui-badge layui-bg-red">{{d.taocan_time}}天</span></span></div> {{#  } }}
                <div class="project-list-item-desc">
                    <span class="time">套餐价格：
                          <span class="layui-badge layui-bg-blue">{{d.taocan_jiage}}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</script>

<!-- js部分 -->
<script type="text/javascript" src="__STATIC__assets/libs/layui/layui.js"></script>
<script type="text/javascript" src="__STATIC__assets/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'dataGrid', 'element', 'dropdown'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var dataGrid = layui.dataGrid;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var dropdown = layui.dropdown;
        var admin = layui.admin;
        // 项目
        $.get('tablecard_list', function (res) {
            dataGrid.render({
                elem: '#demoCardList1',
                templet: '#demoCardItem1',
                data: res.result.data,
                //page: {limit: 8, limits: [8, 16, 24, 32, 40]}
            });
        });



        dataGrid.on('item(demoCardList1)', function (obj) {
            var data = obj.data; // 获得当前行数据
            admin.open({
                type: 1,
                title: "购买会员套餐",
				area: ['440px','330px'],
                content: $('#shangh').html(),
                success: function (layero, dIndex) {
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    form.val('dialogEditForm1',data);
                    // 表单提交事件
                    form.on('submit(dialogEditSubmit1)', function (data) {
						var loadIndex = layer.load(2);
                        $.post('tablecard_save', data.field, function (res) {
                            layer.close(loadIndex);
                            if (1 == res.code) {                                
                                layer.msg(res.msg, {icon: 1});
                                insTb.reload({page: {curr: 1}});
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'json');
                        return false;
                    });

                }
            });
        });

    });
</script>
</body>
</html>